<template>
  <div>
    <el-form :inline="true" :model="formSearch" size="mini">
      <el-form-item label="赛队" prop="teamName">
        <el-autocomplete
          v-model="formSearch.teamName"
          placeholder="请输入队名"
          :fetch-suggestions="teamSearch"
          :trigger-on-focus="false"
          :debounce="0"
          @select="formSearchSelect"
        ></el-autocomplete>
      </el-form-item>
      <el-form-item label="比赛时间">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="起始日期"
            v-model="formSearch.date1"
            format="yyyyMMdd"
            value-format="yyyyMMdd"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">
          &nbsp;&nbsp;<i class="el-icon-minus"></i>
        </el-col>
        <el-col :span="11">
          <el-date-picker
            placeholder="截止日期"
            v-model="formSearch.date2"
            format="yyyyMMdd"
            value-format="yyyyMMdd"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-search"
          circle
          type="primary"
          @click="onSubmit"
        ></el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="onAdd">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="games" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item class="ban" label="A-BAN1">
              <span>{{ props.row.ban1[0] }}</span>
            </el-form-item>
            <el-form-item class="ban" label="B-BAN1">
              <span>{{ props.row.ban2[0] }}</span>
            </el-form-item>
            <el-form-item class="ban" label="A-BAN2">
              <span>{{ props.row.ban1[1] }}</span>
            </el-form-item>
            <el-form-item class="ban" label="B-BAN2">
              <span>{{ props.row.ban2[1] }}</span>
            </el-form-item>
            <el-form-item v-if="props.row.ban1[2]" class="ban" label="A-BAN3">
              <span>{{ props.row.ban1[2] }}</span>
            </el-form-item>
            <el-form-item v-if="props.row.ban2[2]" class="ban" label="B-BAN3">
              <span>{{ props.row.ban2[2] }}</span>
            </el-form-item>

            <el-form-item label="A-PICK1">
              <span>{{ props.row.pick1[0] }}</span>
            </el-form-item>
            <el-form-item label="B-PICK1">
              <span>{{ props.row.pick2[0] }}</span>
            </el-form-item>
            <el-form-item label="A-PICK2">
              <span>{{ props.row.pick1[1] }}</span>
            </el-form-item>
            <el-form-item label="B-PICK2">
              <span>{{ props.row.pick2[1] }}</span>
            </el-form-item>
            <el-form-item label="A-PICK3">
              <span>{{ props.row.pick1[2] }}</span>
            </el-form-item>
            <el-form-item label="B-PICK3">
              <span>{{ props.row.pick2[2] }}</span>
            </el-form-item>
            <el-form-item v-if="props.row.ban1[3]" class="ban" label="A-BAN4">
              <span>{{ props.row.ban1[3] }}</span>
            </el-form-item>
            <el-form-item v-if="props.row.ban2[3]" class="ban" label="B-BAN4">
              <span>{{ props.row.ban2[3] }}</span>
            </el-form-item>
            <el-form-item v-if="props.row.ban1[4]" class="ban" label="A-BAN5">
              <span>{{ props.row.ban1[4] }}</span>
            </el-form-item>
            <el-form-item v-if="props.row.ban2[4]" class="ban" label="B-BAN5">
              <span>{{ props.row.ban2[4] }}</span>
            </el-form-item>
            <el-form-item label="A-PICK4">
              <span>{{ props.row.pick1[3] }}</span>
            </el-form-item>
            <el-form-item label="B-PICK4">
              <span>{{ props.row.pick2[3] }}</span>
            </el-form-item>
            <el-form-item label="A-PICK5">
              <span>{{ props.row.pick1[4] }}</span>
            </el-form-item>
            <el-form-item label="B-PICK5">
              <span>{{ props.row.pick2[4] }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="日期" prop="date"></el-table-column>
      <el-table-column label="赛队A" prop="name1"></el-table-column>
      <el-table-column label="赛队B" prop="name2"></el-table-column>
      <el-table-column label="胜方" prop="winner"></el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="props">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(props.row)"
            >删除
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(props.row)"
            >编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加dialog -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="formAdd" :model="formAdd" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="塞队A" prop="name1">
              <el-autocomplete
                v-model="formAdd.name1"
                placeholder="请输入队名"
                :fetch-suggestions="teamSearch"
                :trigger-on-focus="false"
                :debounce="0"
                @select="teamSelect"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="塞队B" prop="name2">
              <el-autocomplete
                v-model="formAdd.name2"
                placeholder="请输入队名"
                :fetch-suggestions="teamSearch"
                :trigger-on-focus="false"
                :debounce="0"
                @select="teamSelect"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="比赛日期">
              <el-date-picker
                format="yyyyMMdd"
                value-format="yyyyMMdd"
                type="date"
                placeholder="选择比赛日期"
                v-model="formAdd.date"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="胜利方" prop="winner">
              <el-autocomplete
                v-model="formAdd.winner"
                placeholder="请输入队名"
                :fetch-suggestions="teamSearch"
                :trigger-on-focus="false"
                :debounce="0"
                @select="formSearchSelect"
              ></el-autocomplete>
              <!--              <el-input v-model="formAdd.winner" placeholder="请输入胜方队名"/>-->
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="ban1">
          <el-col :span="12">
            <el-form-item label="A-BAN1" class="ban2" prop="ban11">
              <el-autocomplete
                v-model="formAdd.ban11"
                placeholder="请输入A队ban1"
                :fetch-suggestions="heroSearch"
                :trigger-on-focus="false"
                :debounce="0"
                @select="heroSelect"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="B-BAN1" prop="ban21">
              <el-autocomplete
                v-model="formAdd.ban21"
                placeholder="请输入B队ban1"
                :fetch-suggestions="heroSearch"
                :trigger-on-focus="false"
                :debounce="0"
                @select="heroSelect"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="ban1">
          <el-col :span="12">
            <el-form-item label="A-BAN2" prop="ban12">
              <el-autocomplete
                v-model="formAdd.ban12"
                placeholder="请输入A队ban2"
                :fetch-suggestions="heroSearch"
                :trigger-on-focus="false"
                :debounce="0"
                @select="heroSelect"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="B-BAN2" prop="ban22">
              <el-autocomplete
                v-model="formAdd.ban22"
                placeholder="请输入B队ban2"
                :fetch-suggestions="heroSearch"
                :trigger-on-focus="false"
                :debounce="0"
                @select="heroSelect"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="ban1">
          <el-col :span="12">
            <el-form-item label="A-BAN3" prop="ban13">
              <el-autocomplete
                v-model="formAdd.ban13"
                placeholder="请输入A队ban3"
                :fetch-suggestions="heroSearch"
                :trigger-on-focus="false"
                :debounce="0"
                @select="heroSelect"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="B-BAN3" prop="ban23">
              <el-autocomplete
                v-model="formAdd.ban23"
                placeholder="请输入B队ban3"
                :fetch-suggestions="heroSearch"
                :trigger-on-focus="false"
                :debounce="0"
                @select="heroSelect"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="A-PICK1" prop="pick11">
              <el-autocomplete
                v-model="formAdd.pick11"
                placeholder="请输入A队pick1"
                :fetch-suggestions="heroSearch"
                :trigger-on-focus="false"
                :debounce="0"
                @select="heroSelect"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="B-PICK1" prop="pick21">
              <el-autocomplete
                v-model="formAdd.pick21"
                placeholder="请输入B队pick1"
                :fetch-suggestions="heroSearch"
                :trigger-on-focus="false"
                :debounce="0"
                @select="heroSelect"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="A-PICK2" prop="pick12">
              <el-autocomplete
                v-model="formAdd.pick12"
                placeholder="请输入A队pick2"
                :fetch-suggestions="heroSearch"
                :trigger-on-focus="false"
                :debounce="0"
                @select="heroSelect"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="B-PICK2" prop="pick22">
              <el-autocomplete
                v-model="formAdd.pick22"
                placeholder="请输入B队pick2"
                :fetch-suggestions="heroSearch"
                :trigger-on-focus="false"
                :debounce="0"
                @select="heroSelect"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="A-PICK3" prop="pick13">
              <el-autocomplete
                v-model="formAdd.pick13"
                placeholder="请输入A队pick3"
                :fetch-suggestions="heroSearch"
                :trigger-on-focus="false"
                :debounce="0"
                @select="heroSelect"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="B-PICK3" prop="pick23">
              <el-autocomplete
                v-model="formAdd.pick23"
                placeholder="请输入B队pick3"
                :fetch-suggestions="heroSearch"
                :trigger-on-focus="false"
                :debounce="0"
                @select="heroSelect"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="ban1">
          <el-col :span="12">
            <el-form-item label="A-BAN4" prop="ban14">
              <el-autocomplete
                v-model="formAdd.ban14"
                placeholder="请输入A队ban4"
                :fetch-suggestions="heroSearch"
                :trigger-on-focus="false"
                :debounce="0"
                @select="heroSelect"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="B-BAN4" prop="ban24">
              <el-autocomplete
                v-model="formAdd.ban24"
                placeholder="请输入B队ban4"
                :fetch-suggestions="heroSearch"
                :trigger-on-focus="false"
                :debounce="0"
                @select="heroSelect"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="ban1">
          <el-col :span="12">
            <el-form-item label="A-BAN5" prop="ban15">
              <el-autocomplete
                v-model="formAdd.ban15"
                placeholder="请输入A队ban5"
                :fetch-suggestions="heroSearch"
                :trigger-on-focus="false"
                :debounce="0"
                @select="heroSelect"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="B-BAN5" prop="ban25">
              <el-autocomplete
                v-model="formAdd.ban25"
                placeholder="请输入B队ban5"
                :fetch-suggestions="heroSearch"
                :trigger-on-focus="false"
                :debounce="0"
                @select="heroSelect"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="A-PICK4" prop="pick14">
              <el-autocomplete
                v-model="formAdd.pick14"
                placeholder="请输入A队pick4"
                :fetch-suggestions="heroSearch"
                :trigger-on-focus="false"
                :debounce="0"
                @select="heroSelect"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="B-PICK4" prop="pick24">
              <el-autocomplete
                v-model="formAdd.pick24"
                placeholder="请输入B队pick4"
                :fetch-suggestions="heroSearch"
                :trigger-on-focus="false"
                :debounce="0"
                @select="heroSelect"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="A-PICK5" prop="pick15">
              <el-autocomplete
                v-model="formAdd.pick15"
                placeholder="请输入A队pick5"
                :fetch-suggestions="heroSearch"
                :trigger-on-focus="false"
                :debounce="0"
                @select="heroSelect"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="B-PICK5" prop="pick25">
              <el-autocomplete
                v-model="formAdd.pick25"
                placeholder="请输入B队pick5"
                :fetch-suggestions="heroSearch"
                :trigger-on-focus="false"
                :debounce="0"
                @select="heroSelect"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAddForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "records",
  data() {
    return {
      formSearch: {},
      formAdd: {},
      title: "新增比赛记录",
      open: false,
      games: [
        {
          _id: "test",
          date: "20210510",
          winner: "XROCK",
          name1: "RNG.G",
          ban1: ["瞎子", "拉克丝"],
          pick1: ["青钢影", "炸弹人", "加里奥", "布隆", "剑姬"],
          name2: "XROCK",
          ban2: ["酒桶", "阿卡丽"],
          pick2: ["皎月", "诺手", "奥拉夫", "娜美", "韦鲁斯"],
        },
      ],
    };
  },
  created() {
    this.initGames();
  },
  components: {},
  methods: {
    initGames() {
      let that = this;
      this.$db.records.loadDatabase();
      this.$db.records
        .find({})
        .sort({ date: -1, winner: 1 })
        .exec(function (err, records) {
          if (records.length > 0) {
            that.games = records;
          }
        });
    },
    onSubmit() {
      if (!this.formSearch.date1 || !this.formSearch.date2) {
        this.$message({
          showClose: true,
          message: "请选择日期!",
          type: "error",
        });
      } else {
        let that = this;
        this.$db.records.loadDatabase();
        this.$db.records
          .find({
            $where: function () {
              if (that.formSearch.teamName) {
                return (
                  this.date >= that.formSearch.date1 &&
                  this.date <= that.formSearch.date2 &&
                  (this.name1 === that.formSearch.teamName ||
                    this.name2 === that.formSearch.teamName)
                );
              } else {
                return (
                  this.date >= that.formSearch.date1 &&
                  this.date <= that.formSearch.date2
                );
              }
            },
          })
          .sort({ date: -1 })
          .exec(function (err, docs) {
            console.log("res: ", docs);
            that.games = docs;
          });
      }
    },
    formSearchSelect() {},
    cancel() {
      this.resetAdd();
      this.open = false;
    },
    onAdd() {
      this.resetAdd();
      this.open = true;
    },
    resetAdd() {
      this.formAdd = {};
    },
    submitAddForm() {
      let that = this;
      this.$db.records.loadDatabase();
      let ban1s = [this.formAdd.ban11, this.formAdd.ban12];
      if (this.formAdd.ban13) {
        ban1s.push(this.formAdd.ban13);
      }
      if (this.formAdd.ban14) {
        ban1s.push(this.formAdd.ban14);
      }
      if (this.formAdd.ban15) {
        ban1s.push(this.formAdd.ban15);
      }
      let ban2s = [this.formAdd.ban21, this.formAdd.ban22];
      if (this.formAdd.ban23) {
        ban2s.push(this.formAdd.ban23);
      }
      if (this.formAdd.ban24) {
        ban2s.push(this.formAdd.ban24);
      }
      if (this.formAdd.ban25) {
        ban2s.push(this.formAdd.ban25);
      }
      if (!this.formAdd._id) {
        this.$db.records.insert(
          {
            date: this.formAdd.date,
            winner: this.formAdd.winner,
            name1: this.formAdd.name1,
            name2: this.formAdd.name2,
            ban1: ban1s,
            ban2: ban2s,
            pick1: [
              this.formAdd.pick11,
              this.formAdd.pick12,
              this.formAdd.pick13,
              this.formAdd.pick14,
              this.formAdd.pick15,
            ],
            pick2: [
              this.formAdd.pick21,
              this.formAdd.pick22,
              this.formAdd.pick23,
              this.formAdd.pick24,
              this.formAdd.pick25,
            ],
          },
          function (err, recordInserted) {
            that.games.push(recordInserted);
            that.open = false;
            if (err) {
              that.$message({
                showClose: true,
                message: err,
                type: "error",
              });
            } else {
              console.log("recordInserted:", recordInserted);
              that.$message({
                showClose: true,
                message: "操作成功",
                type: "success",
              });
            }
          }
        );
      } else {
        this.$db.records.update(
          { _id: that.formAdd._id },
          {
            _id: that.formAdd._id,
            date: this.formAdd.date,
            winner: this.formAdd.winner,
            name1: this.formAdd.name1,
            name2: this.formAdd.name2,
            ban1: ban1s,
            ban2: ban2s,
            pick1: [
              this.formAdd.pick11,
              this.formAdd.pick12,
              this.formAdd.pick13,
              this.formAdd.pick14,
              this.formAdd.pick15,
            ],
            pick2: [
              this.formAdd.pick21,
              this.formAdd.pick22,
              this.formAdd.pick23,
              this.formAdd.pick24,
              this.formAdd.pick25,
            ],
          },
          {},
          function (err, numReplaced) {
            that.open = false;
            if (err) {
              that.$message({
                showClose: true,
                message: "修改失败",
                type: "error",
              });
            } else {
              that.$message({
                showClose: true,
                message: "操作成功",
                type: "success",
              });
            }
          }
        );
      }
      this.initGames();
    },
    heroSelect(item) {
      console.log("heroSelect: ", this.formAdd.ban11);
    },
    heroSearch(queryString, callback) {
      let that = this;
      let results = [];
      this.$db.heros.loadDatabase();
      this.$db.heros.find(
        {
          $where: function () {
            return this.keywords.indexOf(queryString) > -1;
          },
        },
        function (err, docs) {
          console.log("heros:", docs);
          docs.forEach((heroThis) => {
            results.push({
              // value: heroThis.keywords,
              value: heroThis.name,
            });
          });
        }
      );
      // 调用 callback 返回建议列表的数据
      callback(results);
    },
    teamSelect(item) {
      console.log("teamSelect: ", this.formSearch.teamName);
    },
    teamSearch(queryString, callback) {
      let that = this;
      let results = [];
      this.$db.teams.loadDatabase();
      this.$db.teams.find(
        {
          $where: function () {
            return this.name.indexOf(queryString) > -1;
          },
        },
        function (err, docs) {
          console.log("teams:", docs);
          docs.forEach((teamThis) => {
            results.push({
              // value: heroThis.keywords,
              value: teamThis.name,
            });
          });
        }
      );
      // 调用 callback 返回建议列表的数据
      callback(results);
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      console.log("row: ", row);
      let id = row._id;
      let that = this;
      this.$confirm('是否确认删除编号为"' + id + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(function () {
        // return delList(id);
        console.log("row.values: ", Object.values(row));
        that.$db.records.remove({ _id: id }, {}, function (err, numRemoved) {
          console.log("remove success: ", numRemoved);
        });
        that.games.remove({ _id: id });
      });
    },
    handleEdit(row) {
      console.log("current-row:", row);
      (this.formAdd = {
        _id: row._id,
        name1: row.name1,
        name2: row.name2,
        date: row.date,
        winner: row.winner,
        ban11: row.ban1[0],
        ban12: row.ban1[1],
        ban13: row.ban1[2],
        ban14: row.ban1[3],
        ban15: row.ban1[4],
        ban21: row.ban2[0],
        ban22: row.ban2[1],
        ban23: row.ban2[2],
        ban24: row.ban2[3],
        ban25: row.ban2[4],
        pick11: row.pick1[0],
        pick12: row.pick1[1],
        pick13: row.pick1[2],
        pick14: row.pick1[3],
        pick15: row.pick1[4],
        pick21: row.pick2[0],
        pick22: row.pick2[1],
        pick23: row.pick2[2],
        pick24: row.pick2[3],
        pick25: row.pick2[4],
      }),
        (this.open = true);
    },
  },
};
</script>

<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.ban {
  width: 100%;
  background-color: #409eff;
  color: #fff;
}

.ban1 {
  color: #409eff !important;
}

.el-form-item__label {
  color: unset;
}
</style>
